<template>
    <div class="container pt44">
      <dl class="list list-tl">
        <dt class="list-title b-bottom">申请人信息</dt>
        <dd class="item">
            <div class="item-detail b-bottom ui-flexbox ">
              <span class="item-title">姓名</span>
              <span class="item-cont fr" id="userNam-box">
              <!--<input id="user-name" class="input" name="cust_name" type="text" maxlength="20" placeholder="申请人姓名" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">-->
              <input @change="userNameChange" @input="userNameInput" v-model="userName" id="user-name" class="input" name="cust_name" type="text" maxlength="10" placeholder="申请人姓名">

              </span>
            </div>
          </dd><dd v-show="userNameErro != ''" class="item b-bottom item-erro">{{ userNameErro }}</dd>
          <dd class="item pr">
            <div class="item-detail b-bottom ui-flexbox ">
              <span class="item-title">身份证号</span>
              <span class="item-cont" id="userId-box">
                    <input @input="userIdInput" @change="userIdChange" @blur="userIdBlur" @focus="userIdFocus" v-model="userId" class="input" name="id_no" type="tel" maxlength="18" placeholder="18位证件号,末位X以*代替">
              </span>
            </div>
            <InputPrompt v-show="this.showUserIdPrompt" v-bind:myMessage="userId" msgType="sfz"></InputPrompt>
          </dd><dd v-show="sfzErro != ''" class="item b-bottom item-erro">{{sfzErro}}</dd>

      </dl>
      <dl class="list list-tl mt-10">
        <dt class="list-title b-bottom">信用卡信息</dt>
        <dd class="item pr">
          <div class="item-detail b-bottom ui-flexbox ">
            <span class="item-title">信用卡号</span>
            <span class="item-cont">
                <input @input="cardIdInput" @change="cardIdInputChange" @blur="cardIdBlur" @focus="cardIdFocus" v-model="cardId" class="input" type="tel" maxlength="22" name="citem-erroitCard" oninput="if(value.length>22)value=value.slice(0,22)" placeholder="信用卡号">
            </span>
          </div>
          <InputPrompt v-show="this.showCardIdPrompt"v-bind:myMessage="cardId" msgType="backCard"></InputPrompt>
        </dd><dd v-show="XYKNumErro != ''" class="item b-bottom item-erro">信用卡格式错误！</dd>
        <dd class="item">
          <div class="item-detail b-bottom ui-flexbox ">
            <span class="item-title">CVN2</span>
            <span class="item-cont" id="cvn2Num-box">
                <input v-model="cvn2" @change="cvn2inputChange" @input="cvn2input" name="cvn2Num" class="input" type="password" maxlength="3" placeholder="卡片背面签名条的三位数字">
            </span>
          </div>
        </dd><dd v-show="Cvn2NumErro != ''" class="item b-bottom item-erro">CVN2格式错误！</dd>
        <dd class="item">
          <div class="item-detail b-bottom ui-flexbox ">
            <span class="item-title">有效期</span>
            <span class="item-cont" id="timeNum-box">
                <input @input="timeNumInput" @change="timeNumInputChange" v-model="timeNum" class="input" type="tel" maxlength="4" placeholder="MMYY,2016年3月到期即0316">
            </span>
          </div>
        </dd><dd v-show="timeNumErro != ''" class="item b-bottom item-erro">有效时间格式错误！</dd>
        <dd class="item pr">
          <div class="item-detail b-bottom ui-flexbox ">
            <span class="item-title">手机号码</span>
            <span class="item-cont">
                <input @input="phoneInput" @change="phoneInputChange" @blur="phoneBlur" @focus="phoneFocus" v-model="phoneNo" type="tel" class="input" name="hp_no" maxlength="11" onkeypress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false" placeholder="银行预留手机号">
            </span>
          </div>
          <InputPrompt v-show="this.showPhonePrompt" v-bind:myMessage="phoneNo" msgType="phone"></InputPrompt>
        </dd><dd v-show="phoneNumErro != ''" class="item b-bottom item-erro">手机号码错误！</dd>
        <dd class="item">
          <div class="item-detail b-bottom ui-flexbox ">
            <span class="item-title">验证码</span>
            <span class="item-cont">
                <input @input="vcodeInput" @change="vcodeInputChange" v-model="vcode" class="input verify-box" name="verify_code" type="tel" maxlength="4" placeholder="验证码">
              <a @click="verifyBtn" v-bind:class="{disable:disablehqdx}" class="get-btn fr" href="javascript:;">{{xhqbtn}}</a>
            </span>
          </div>
        </dd><dd v-show="yzmErro != ''" class="item b-bottom item-erro">验证码错误！</dd>

      </dl>
      <p class="p15" v-show="this.$store.state.channelNo == '01'">请填写以上信息，将您的信用卡额度作为本次交易的担保，如超期未主动还款，将使用您的信用卡额度还款，并加收1%借款手续费</p>
      <div class="btn_box mt-10">
          <a href="javascript:;" id="showConfirm" @click="showConfirm" class="weui-btn weui-btn_primary weui-btn weui-btn_primary weui-btn_disabled">提交申请</a>
      </div>
      <div class="js_dialog confirm-dialog" v-show="isShowConfirm">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div @click="closeConfirm" class="close_cofirm"></div>
            <div class="weui-dialog__bd">
                <div class="confirm_img"></div>
                <dl class="list list-tl">
                <dt class="list-title b-bottom">确认申请</dt>
                <dd class="item">
                  <div class="item-detail b-bottom ui-flexbox ">
                    <span class="item-title">{{ sqzemsg }}</span>
                    <span class="item-cont">
                        {{this.principal}}元
                    </span>
                  </div>
                </dd>
                <dd class="item" v-show="this.$store.state.channelNo == '02'">
                  <div class="item-detail b-bottom ui-flexbox ">
                    <span class="item-title">手续费</span>
                    <span class="item-cont">
                        {{this.$store.state.accountServiceCharge}}元
                    </span>
                  </div>
                </dd>
                <dd class="item">
                  <div class="item-detail b-bottom ui-flexbox ">
                    <span class="item-title">{{hkmsg}}</span>
                    <span class="item-cont" id="cvn2Num-box">
                        {{this.repaymentDate}}
                    </span>
                  </div>
                </dd>
                <dd class="item">
                  <div class="item-detail b-bottom ui-flexbox ">
                    <span class="item-title">{{ jyzemsg }}</span>
                    <span class="item-cont" id="timeNum-box">
                        {{this.freezeMoney}}元
                    </span>
                  </div>
                </dd>
                <dd class="item">
                    <div class="item-detail b-bottom ui-flexbox ">确认后将发起1.00元的验证服务费</div>
                </dd>
              </dl>
              <div class="">
                <a @click="getOrderNumber" href="javascript:;" class="weui-btn weui-btn_primary">确认</a>
              </div>
            </div>

        </div>
    </div>
    </div>
</template>

<script>

var cm = require("../components/common.js");
// 身份证正则表达式
var idRegExp = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
// 验证四位时间 2016年04月 0416
function isTimeNum(timeNum) {
    var istNum = true;
    if (timeNum.length < 4 || parseInt(timeNum.substr(0, 2)) > 12 || parseInt(timeNum.substr(0, 2)) < 1) {
        istNum = false;
    } else {
        //验证是否 大于现在
        istNum = cm.isNextYearMonth(timeNum.substr(2, 2), timeNum.substr(0, 2));
    }


    return istNum;
}

export default  {
    name: 'info',  // 组件贷款人信息填写
    data () {  // 数据
        return {
            msg: 'info',
            userName:"",  // 姓名
            userId:"",  // 身份证
            cardId:"",  // 信用卡号
            cvn2:"",   //
            timeNum:"",
            phoneNo:"",
            vcode:"",
            djs:120,
            userNameErro:'',
            sfzErro:'',
            XYKNumErro:'',
            Cvn2NumErro:'',
            timeNumErro:'',
            phoneNumErro:'',
            yzmErro:'',
            xhqbtn:"获取验证码",
            showUserIdPrompt:false,
            showCardIdPrompt:false,
            showPhonePrompt:false,
            isShowConfirm:false,    // 信息确认弹框
            principal:"",
            freezeMoney:"",
            hkmsg:"最后还款日",
            sqzemsg:"借款金额",
            jyzemsg:"冻结金额"
        }
    },
    computed:{
        disablehqdx:function() {
            if(this.phoneNo.length == 11 && this.djs == 120){
                return false;
            }else{
                return true;
            }
        },
        repaymentDate:function  () {
            var repaymentDate = this.$store.state.repaymentDate;
            if(this.$store.state.channelNo == "02"){
                repaymentDate = this.$store.state.accountRepaymentDate;
            }
            return repaymentDate;
        }
    },
    methods:{ // 自定义方法，可对data进行处理
        init(){
            if(this.$store.state.channelNo == "02"){
                this.freezeMoney = this.$store.state.accountRepaymentAmount;
                this.principal = this.$store.state.accountLoanAmount;
                this.hkmsg = "交易还款日";
                this.sqzemsg = "申请金额";
                this.jyzemsg = "交易总额";
            }else{
                this.freezeMoney = this.$store.state.maximumRepay;
                this.principal = this.$store.state.loanApplyMoney;
                this.hkmsg = "最后还款日";
                this.sqzemsg = "借款金额";
                this.jyzemsg = "冻结金额";
            }

        },
        getOrderNumber(){
            this.isShowConfirm = false;
            this.$store.state.showLoading = true;
            if(this.$store.state.interestRate == ""){
                this.$store.state.errorMsg = "日利率获取失败";
                return;
            }
            var repaymentDate = this.$store.state.repaymentDate;
            if(this.$store.state.channelNo == "02"){
                repaymentDate = this.$store.state.accountRepaymentDate;
            }
            var onParaments = {
                openId:       this.$store.state.openid,  //微信号
                prdtNo:       this.$store.state.prdtNo, //产品号
                channelNo:    this.$store.state.channelNo, //产品渠道
                custName:     this.userName, //客户姓名
                idNo:         this.userId, //身份证号
                creditCardNo: this.cardId, //信用卡号
                expiryDate:   this.timeNum, //信用卡有效期格式
                cvn2:         this.cvn2, //cvn2
                hpNo:         this.phoneNo, //银行预留手机号
                tlMerId:      this.$store.state.tlMerId, //通联商户号
                borrowAmt:    this.$store.state.loanApplyMoney, //借款金额
                endRepayDate: repaymentDate.replace(/-/g,""), //最后还款日期  帐期还款日期
                dayInterest:  this.$store.state.dailyInterest, //日利息
                freezeAmt:    this.$store.state.maximumRepay, //闪贷冻结金额  帐期还款金额
                verify_code:  this.vcode,  // 短信验证码
                servlet_type:"create_order",
            }
            if(this.$store.state.channelNo == "02"){
                onParaments.borrowAmt = this.$store.state.accountLoanAmount;
                onParaments.freezeAmt = this.$store.state.accountRepaymentAmount;
                onParaments.accountRepaymentDate = this.$store.state.accountreMonthpaymentDate;
                onParaments.statementDate = this.$store.state.statementDate;
                onParaments.prepayCostCycle = this.$store.state.loanDays;  //
            }
            var _this = this;
            $.post(XtsdAddOrderServlet,onParaments,function(odData) {
                _this.$store.state.showLoading = false;
                console.dir(odData);
                _this.isShowConfirm = false;
                if(odData.xtsd_OrderInfo_response && odData.xtsd_OrderInfo_response.respCode == "0000" && odData.xtsd_OrderInfo_response.serialNo){
                    _this.$store.state.payCode = odData.xtsd_OrderInfo_response.serialNo;
                    location.hash = "#/qrcodepay";
                }else if(odData.error_response && odData.error_response.resp_msg){
//                    alert(JSON.stringify(odData));  //测试调试
                    _this.$store.state.errorMsg = odData.error_response.resp_msg;
                }else {
//                    alert(JSON.stringify(odData));  //测试调试
                    _this.$store.state.errorMsg = "无法生成订单消费码";
                }
            })
        },
        closeConfirm(){
            this.isShowConfirm = false;
        },
        showConfirm(){
            if($("#showConfirm").hasClass("weui-btn_disabled")){
                return;
            }else{
                this.isShowConfirm = true;
            }

        },
        disabledSumbit(){
            var isUserName = (this.userName !=""&& this.userName.length>1 && this.userName.length<11 && cm.isCnName(this.userName));
            var isUserId = idRegExp.test(this.userId);
            var istn = isTimeNum(this.timeNum);
            if(isUserName&&isUserId&&this.cardId.length > 12 && this.cardId.length < 17&&this.cvn2.length == 3&&istn&&this.phoneNo.length == 11&&this.vcode.length == 4){
                $("#showConfirm").removeClass("weui-btn_disabled");
            }else{
                $("#showConfirm").addClass("weui-btn_disabled");
            }
        },
        userNameChange(){
            console.log(this.userName)
            console.log(cm.isCnName(this.userName));
            if(this.userName =="") {
                this.userNameErro = "请输入中文名"
            } else if(!cm.isCnName(this.userName)){
                this.userNameErro ="中文名字格式不符合要求"
            } else if(this.userName.length<2 || this.userName.length>10){
                this.userNameErro ="中文名长度不符合要求"
            }else{
                this.$store.state.userName = this.userName;
                this.userNameErro = "";
            }
        },
        userNameInput(){
            if(this.userName !=""&& this.userName.length>1 && this.userName.length<11 && cm.isCnName(this.userName)){
                this.userNameErro = "";
            }
            this.disabledSumbit();
        },
        "userIdInput": function(event) {
            this.userId = this.userId.replace(/\D/g, "X").replace(/[^0-9|X|x]/g, "");;
            if(idRegExp.test(this.userId)) {
                this.sfzErro = "";
            }
            this.disabledSumbit();
        },
        "userIdChange": function() {

            if(this.userId ==""){
                this.sfzErro = "请输入身份证号";
            } else if(idRegExp.test(this.userId)) {
                this.sfzErro = "";
            }else{
                this.sfzErro = "身份证错误";
            }

        },
        "userIdBlur":function() {
            this.showUserIdPrompt = false;
        },
        "userIdFocus":function() {
            this.showUserIdPrompt = true;
        },
        "cardIdBlur":function() {
            this.showCardIdPrompt = false;
        },
        "cardIdFocus":function() {
             this.showCardIdPrompt = true;
        },
        "cardIdInput": function(event) {
            if (this.cardId.search(/\D/) != -1) {
                this.cardId = this.cardId.replace(/\D/g, "");
            }
            if (this.cardId.length > 12 && this.cardId.length < 17) {
                this.XYKNumErro = "";
            }

            this.disabledSumbit();
        },
        "cardIdInputChange": function() {
            if (this.cardId.length < 13 || this.cardId.length > 16) {
                this.XYKNumErro = "信用卡号错误";
            }else{
                this.$store.state.cardId = this.cardId;
            }

        },
        "cvn2input": function() {
            if (this.cvn2.search(/\D/) != -1) {
                this.cvn2 = this.cvn2.replace(/\D/g, "");
            }
            if (this.cvn2.length == 3) {
                this.Cvn2NumErro = "";
            }
            this.disabledSumbit();
        },
        "cvn2inputChange": function() {
            if (this.cvn2.length == 3) {
                this.Cvn2NumErro = "";
            } else {
                this.Cvn2NumErro = "信用卡CVN2错误";
            }
        },
        "timeNumInput": function() {
            if (this.timeNum.search(/\D/) != -1) {
                this.timeNum = this.timeNum.replace(/\D/g, "");
            }
            var istn = isTimeNum(this.timeNum);
            if (istn) {
                this.timeNumErro = "";
            }
            this.disabledSumbit();
        },
        "timeNumInputChange": function() {
            var istn = isTimeNum(this.timeNum);
            if (istn) {
                this.timeNumErro = "";
            } else {
                this.timeNumErro = "信用卡有效期错误";
            }
        },
        "phoneBlur":function() {
            this.showPhonePrompt = false;
        },
        "phoneFocus":function() {
            this.showPhonePrompt = true;
        },
        "phoneInput": function(event) {
            if (this.phoneNo.search(/\D/) != -1) {
                this.phoneNo = this.phoneNo.replace(/\D/g, "");
            }
            if (this.phoneNo.length == 11) {
                if (this.djs == 120) {
                    $("#getVcode_btn").removeClass("disabled");
                }
                this.phoneNumErro = "";
            } else {
                $("#getVcode_btn").addClass("disabled");
            }
            this.disabledSumbit();
        },
        "phoneInputChange": function() {

            if (this.phoneNo.length != 11) {
                this.phoneNumErro = "电话号错误";
            } else {
                this.phoneNumErro = "";
            }
        },
        "vcodeInput": function() {
            if (this.vcode.search(/\D/) != -1) {
                this.vcode = this.vcode.replace(/\D/g, "");
            }
            if (this.vcode.length == 4) {
                this.yzmErro = "";
            }
            this.disabledSumbit();
        },
        "vcodeInputChange": function() {
            if (this.vcode.length == 4) {
                this.yzmErro = "";
            } else {
                this.yzmErro = "请输入4位验证码";
            }
        },
        verifyBtn(){
            if(this.phoneNo.length == 11 && this.djs == 120){
                this.djs = 119;
                var _this = this;
                this.xhqbtn = "重新获取("+this.djs+")";
                var vbhanbel = setInterval(function  () {
                   _this.djs--;
                   _this.xhqbtn = "重新获取("+_this.djs+")";
                   if(_this.djs <= 0){
                    clearInterval(vbhanbel);
                    _this.xhqbtn = "重新获取";
                    _this.djs = 120;
                   }
                },1000)
                $.post(LFQSendSMSServlet,{
                    hp_no: this.phoneNo,
                    openid: this.$store.state.openid,
                    prdt_no: "0301"
                },function(smsg) {
                    console.dir(smsg);
                });
            }
        },
    },
    mounted:function  () {
        this.init();
    }
}
</script>

<style lang='scss' scoped>
@import "../assets/scss/_form-list.scss";
// 左右内边距15px
.prl-15{
    padding: 0 15px;
}
// 内边距15px
.p15{
    padding:15px;
}
.pr{
    position: relative;
}
.mt-10{
    margin-top: 10px;
}
.item-cont{
    input{
        font-size: 17px;
    }
}
.list-tl .get-btn.disable{
    color: #ccc;
    border-color: #ccc;
}
.confirm-dialog{
    .item-title{
        text-align: left;
        width: 105px;
    }
    .item-cont{
        text-align: right;
        input{
            font-size: 17px;
        }
    }
    .weui-dialog{
        width:85%;
        max-width: 400px;

        background: rgba(0, 0, 0, 0);
    }
    .weui-dialog__bd{
        padding:0px 10px 0 10px;
    }
    .weui-btn_primary{
        border-radius: 0px;
    }
    .close_cofirm{
        width:35px;
        height:35px;
        background-image: url('/FuLiBao/Lenovo/static/images/guanbi_icon.png');
        background-size: 100%;
        position: absolute;
        right: 0px;
        top: 9px;
    }
}
.confirm_img{
    height: 123px;
    background-image: url('/FuLiBao/Lenovo/static/images/querenhuankuan_icon_620-X-246.png');
    background-size: 100% 100%;
}
</style>
